import MainContainerCustom from '@/components/MainContainerCustom';
import { View } from '@tarojs/components';
import { CSummarizCustom, CTabsCustom, CBlockCustom } from '@vh-mobile/pro-components';
import { useState } from 'react';

export default function DemoTabs() {
  const [tabKey, setTabKey] = useState('1');
  const tabList = [
    {
      tab: '任务总览',
      key: '1',
    },
    {
      tab: '任务明细',
      key: '2',
    },
  ];
  const dataSource = [
    { name: '客服记录', value: '1' },
    { name: '客服去电', value: '2' },
    { name: '线索转化', value: '3' },
    { name: '客服签约', value: '6' },
  ];
  const dataSource1 = [
    { name: '线索转化', value: '3' },
    { name: '客服签约', value: '6' },
  ];
  const onckick = (key: any) => {
    setTabKey(key);
  };
  return (
    <MainContainerCustom>
      <CBlockCustom title="基础用法">
        <CTabsCustom tabList={tabList} activateTabKey={tabKey} onClick={onckick} />
        {tabKey == '1' ? (
          <View>
            <CSummarizCustom dataSource={dataSource1} title={'房源任务'} total={15} />
          </View>
        ) : (
          <View>
            <CSummarizCustom dataSource={dataSource} title={'客户任务'} total={9} />
          </View>
        )}
      </CBlockCustom>
      <CBlockCustom title="有边框背景">
        <CTabsCustom
          style={{ padding: '20px 40px', background: '#f3f2f7' }}
          tabList={tabList}
          activateTabKey={tabKey}
          onClick={onckick}
          type="border"
        />
        {tabKey == '1' ? (
          <View>
            <CSummarizCustom dataSource={dataSource} title={'客户任务'} total={15} />
          </View>
        ) : (
          <View>
            <CSummarizCustom dataSource={dataSource1} title={'房源任务'} total={9} />
          </View>
        )}
      </CBlockCustom>
    </MainContainerCustom>
  );
}
